<template>
    <div class="orderDetail">
    <div class="bread">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>订单详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="order-detail-content">
        <h2 style="margin-top: 20px;">客户信息</h2>
        <table border="" cellspacing="0" cellpadding="0">
            <tr>
                <td class="table-label">姓名</td><td>{{data.customerName}}</td>
                <td class="table-label">手机号</td><td>{{data.customerPhone | formatPhone}}</td>
                <td class="table-label">性别</td><td>{{data.customerSexText}}</td>
            </tr>
            <tr>
                <td class="table-label">意向楼盘</td><td>{{data.devName}}</td>
                <td class="table-label">客户来源</td><td>{{data.customerSourceText}}</td>
                <td class="table-label">证件类型</td><td>{{data.customerIdType}}</td>
            </tr>
            <tr>
                <td class="table-label">证件号码</td><td>{{data.customerIdNum}}</td>
                <td class="table-label">证件姓名</td><td>{{data.customerIdCardName}}</td>
                <td class="table-label"></td><td></td>
            </tr>
        </table>
        <h2>开发商结佣信息</h2>
        <table border="" cellspacing="0" cellpadding="0">
            <tr>
                <td class="table-label">应结佣金额</td><td>{{data.shouldDeveloperBrokerageAmount | formatNum}}</td>
                <td class="table-label">已结佣金额</td><td>{{data.yetDeveloperBrokerageAmount | formatNum}}</td>
                <td class="table-label">待结佣金额</td><td>{{data.willDeveloperBrokerageAmount | formatNum}}</td>
            </tr>
            <tr v-for="(item,index) in data.developerRecord" :key='index'>
                <td class="table-label">第{{index | chineseNum}}次结佣金额</td><td>{{item.amount | formatNum}}</td>
                <td class="table-label">第{{index | chineseNum}}次结佣时间</td><td>{{item.time | formatTime}}</td>
                <td class="table-label">第{{index | chineseNum}}次结佣批次</td><td>{{item.batchCode}}</td>
            </tr>
        </table>
        <h2>开发商回款信息</h2>
        <table border="" cellspacing="0" cellpadding="0">
            <tr>
                <td class="table-label">应回款金额</td><td>{{data.developerShouldReturnAmount | formatNum}}</td>
                <td class="table-label">已回款金额</td><td>{{data.developerYetReturnAmount | formatNum}}</td>
                <td class="table-label">待回款金额</td><td>{{data.developerWillReturnAmount | formatNum}}</td>
            </tr>
            <tr v-for="(item,index) in data.developerReturnRecord" :key='index'>
                <td class="table-label">第{{index | chineseNum}}次回款金额</td><td>{{item.amount | formatNum}}</td>
                <td class="table-label">第{{index | chineseNum}}次回款时间</td><td>{{item.returnTime | formatTime}}</td>
                <td class="table-label">第{{index | chineseNum}}次回款批次</td><td>{{item.batchCode}}</td>
            </tr>
        </table>
        <h2>个人结佣信息</h2>
        <table border="" cellspacing="0" cellpadding="0">
            <tr>
                <td class="table-label">预计结佣</td><td>{{data.brokerBrokerageAmount | formatNum}}</td>
                <td class="table-label">应结佣金额</td><td>{{data.yetBrokerBrokerageAmount | formatNum}}</td>
                <td class="table-label">待结佣金额</td><td>{{data.willBrokerBrokerageAmount | formatNum}}</td>
            </tr>
            <tr v-for="(item,i) in data.brokerRecord" :key='i'>
                <td class="table-label">第{{i | chineseNum}}次结佣金额</td><td>{{data.brokerRecord[i].brokerExamineState != 3 ? '待定':data.brokerRecord[i].broAmount | formatNum}}</td>
                <td class="table-label">第{{i | chineseNum}}次结佣时间</td><td>{{data.brokerRecord[i].brokerExamineState != 3 ? '待定':data.brokerRecord[i].brokerTime | formatTime}}</td>
                <td class="table-label">{{i==0?'业绩归属人':''}}{{i==1?'手机号':''}}</td>
                <td>{{i==0?data.brokerApplyUserName:''}}{{i==1?data.brokerApplyUserPhone:'' | formatPhone}}</td>
            </tr>

        </table>
        <h2>经纪公司结佣信息</h2>
        <table border="" cellspacing="0" cellpadding="0">
            <tr>
                <td class="table-label">预计结佣</td><td>{{data.companyBrokerageAmount}}</td>
                <td class="table-label">应结佣金额</td><td>{{data.yetCompanyBrokerageAmount}}</td>
                <td class="table-label">待结佣金额</td><td>{{data.willCompanyBrokerageAmount}}</td>
            </tr>
            <tr v-for="(item,i) in data.comRecord" :key='i'>
                <td class="table-label">第{{i | chineseNum}}次结佣金额</td><td>{{data.comRecord[i].examineState != 3 ? '待定': data.comRecord[i].comAmount | formatNum}}</td>
                <td class="table-label">第{{i | chineseNum}}次结佣时间</td><td>{{data.comRecord[i].examineState != 3 ? '待定': data.comRecord[i].time | formatTime}}</td>
                <td class="table-label">{{i==0?'业绩归属人':''}}{{i==1?'手机号':''}}</td>
                <td>{{i==0?data.comApplyUserName:''}}{{i==1?data.comApplyUserPhone:'' | formatPhone}}</td>
            </tr>
        </table>
        <h2>跟进最新信息</h2>
        <table border="" cellspacing="0" cellpadding="0">
            <tr>
                <td class="table-label">跟进状态</td><td>{{data.followTypeText}}</td>
                <td class="table-label">时间</td><td>{{data.followCreateTime | formatTime}}</td>
                <td class="table-label">业绩归属人</td><td>{{data.followBrokerName}}</td>
            </tr>
            <tr>
                <td class="table-label">所属楼栋</td><td>{{data.buildName}}</td>
                <td class="table-label">所属单元</td><td>{{data.unit}}</td>
                <td class="table-label">所属楼层</td><td>{{data.floor}}</td>
            </tr>
            <tr>
                <td class="table-label">所属房号</td><td>{{data.cellName}}</td>
                <td class="table-label">户型</td><td>{{data.structure}}</td>
                <td class="table-label">建筑面积</td><td>{{data.farea}}</td>
            </tr>
            <tr>
                <td class="table-label">套内面积</td><td>{{data.uarea}}</td>
                <td class="table-label">成交价格</td><td>{{data.purchasePrice}}</td>
                <td class="table-label">订单号</td><td>{{data.orderCode}}</td>
            </tr>
        </table>
    </div>
    </div>
</template>

<script>
import api from "@/api/apiPath"

export default {
    name:"orderDetail",
    created() {
        this.getOrderDetail(this.$route.query.id)
    },
    mounted() {},
    components: {},
    data() {
        return {
                
        }
    },
    methods: {
        getOrderDetail(id){
            this.axios.get(api.orderDetail + id).then(res => {
                this.data = res.data.data.data
            })
        }
    },
    computed: {},
    filters: {
        formatNum(value) {
            if (value == "") {
                return "0.00"
            }
            if(isNaN(value)){
                return '待定'
            }
            value = parseFloat(value);
            return value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        },
        formatTime(value) {
            if(isNaN(value)){
                return '待定'
            }
            return utils.getTimeString(value)
        },
        formatPhone(value) {
            if (value) {
                return value.substr(0, 3) + '****' + value.substr(7);
            }else{
                return ''
            }
        },
        chineseNum(val){
            const numArray = ['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四']
            return numArray[val]
        }
    },
}
</script>
<style lang="stylus" scoped>
    .orderDetail {
        padding-top: 46px;
        .order-detail-content{
            background: #fff;
            padding: 0 20px 20px;
            overflow: auto;
        }
        h2{
            font-size: 20px;
            margin: 40px auto 20px;
        }
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            font-size: 14px;
            width: 1200px;
            td{
                width: 156px;
                height: 40px;
                text-align: center;
            }
            .table-label{
                background-color: rgba(242,242,242,1);
            }
        }
    }
</style>